<template>
  <div class="botInfo">
    <div class="banner">
      <client-carousel arrows="never" height="200px" :url="banner" />
    </div>
    <div class="main">
      <div class="min-container">
        <el-row :gutter="0">
          <el-col :span="24" :xs="24" :sm="24" :md="12"> </el-col>
          <el-col :span="24" :xs="24" :sm="24" :md="12">
            <client-title title="方案与架构咨询" class="content-title" />
            <client-title
              title="关于使用场景和技术架构的更多咨询， 请联系我们的销售和技术支持团队。"
              class="content-title"
            />
            <div class="learnMore">
              <span @click="handleDetail">了解详情</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ClientTitle from "@/components/client-title/client-title.vue";
import { getAssetURL } from "@/utils/load_assets";
const bannerUrl = getAssetURL("client/home/content/banner4.png");
const banner = ref<any>([{ url: bannerUrl }]);

// 了解详情
const handleDetail = () => {
  console.log("了解详情");
};
</script>
<style lang="less" scoped>
.botInfo {
  position: relative;
  margin-bottom: 0;
  background: #2066f4;
  .main {
    position: absolute;
    top: 0;
    width: 100%;
    .content-title {
      text-align: left;
      margin: 20px 0;
      color: #fff;
      font-size: 16px;
    }
    .min-container {
      margin-top: 20px;
      .learnMore {
        margin-top: 60px;
        color: #fff;
        span {
          padding: 10px 60px;
          transition: all 0.3s;
          background-color: #4098ff;
          &:hover {
            cursor: pointer;
            background-color: #66cafe;
            color: #ffffff;
          }
          &:active {
            background-color: #57b3e4;
          }
        }
      }
    }
  }
}
</style>
